<ix-page-header [pageTitle]="(pageTitle$ | async) || ''">
  @if (!(hasRequiredRoles | async)) {
    <ix-readonly-badge></ix-readonly-badge>
  }
</ix-page-header>

@if (appsLoaded) {
  <div class="app-wizard-wrapper">
    <div class="wizard-container">
      <div class="mini-search-card">
        <ix-input
          [prefixIcon]="iconMarker('search')"
          [formControl]="searchControl"
          [placeholder]="'Search Input Fields' | translate"
          [autocompleteOptions]="searchOptions"
        ></ix-input>
      </div>
      <form [formGroup]="form" (submit)="onSubmit()">
        <ix-dynamic-wizard
          [dynamicSection]="dynamicSection"
          [dynamicForm]="form"
          (addListItem)="addItem($event)"
          (deleteListItem)="deleteItem($event)"
        ></ix-dynamic-wizard>

        @if (showAppMetadata) {
          <ix-app-metadata-card [appMetadata]="catalogApp.app_metadata"></ix-app-metadata-card>
        }
        <div class="actions">
          <button
            *ixRequiresRoles="requiredRoles"
            mat-button
            type="submit"
            color="primary"
            ixTest="save"
            [disabled]="form.invalid || isLoading"
          >
            {{ isNew ? ('Install' | translate) : ('Update' | translate) }}
          </button>
        </div>
      </form>
    </div>

    @if (appsLoaded) {
      <div class="search-container">
        <div class="search-card">
          <ix-input
            [prefixIcon]="iconMarker('search')"
            [formControl]="searchControl"
            [placeholder]="'Search Input Fields' | translate"
            [autocompleteOptions]="searchOptions"
          ></ix-input>
          @for (section of dynamicSection; track section) {
            <div class="section" (click)="onSectionClick(section.name)">
              {{ section.name }}
              @if (checkSectionInvalid(section)) {
                <ix-icon name="warning"></ix-icon>
              }
            </div>
          }
        </div>
      </div>
    }
  </div>
}
